<template>
  <div class="dashboard-container">
    <!-- 地灾选择器 -->
    <!-- <div class="topMenu">
      <div class="sceneList">
        <span>当前地灾：</span>
        <div class="city-select" @mouseover="mouseOver" @mouseleave="mouseLeave">
          <span class="name" :style="sceneSelShow ? 'background: #1E2635;' : ''">{{ sceneSel }}</span>
          <img :style="sceneSelShow ? 'transform: rotate(-180deg)' : ''" src="@/assets/pic/shape_scene_city@2x.png">
          <ul :style="sceneSelShow ? 'display: block;' : ''">
            <li v-for="(item, index) in sceneList" :key="index" @click="sceneChange(item.id, item.name)">{{ item.name }}
            </li>
          </ul>
        </div>
      </div>
      <div class="button" @click="$router.push('/watch/index')">返回地图 >></div>
    </div> -->
    <!-- 主体部分 -->
    <div v-if="checkHas" class="container">
      <el-row style="margin-bottom: 30px">
        <div v-for="(item, index) in allData" :key="index">
          <el-col :span="7" :offset="1" :pull="1">
            <div ref="echarts_mains1" class="line-card">
              <!-- 头部名称 -->
              <div class="top-title">
                <div class="title">
                  <!-- <img src="@/assets/pic/dashboard_dian@2x.png"> -->
                  <h1 style="color: #555">{{ item.name }}</h1>
                </div>
                <!-- <img src="" @click="clickBig(item, index)"> -->
                <span
                  style="cursor: pointer"
                  @click="clickBig(item, index)"
                >大图</span>
              </div>
              <div class="top-title" style="margin-bottom: -50px">
                <div class="title">
                  <!-- <p>（单位：mm）</p> -->
                  <!-- <p @click="toggleCal(item, index)">{{ item.data.sufa === 1 ? '更改防抖动算法' : '更改普通算法' }}</p>
                  <img class="icon" style="margin-left: 10px" src="@/assets/pic/ic_cut@2x.png" @click="toggleCal(item, index)"> -->
                </div>
                <div class="title">
                  <!-- <img class="icon" src="" @click="item.dataTable = !item.dataTable"> -->
                  <span
                    style="cursor: pointer"
                    @click="item.inverse = !item.inverse"
                  >翻转</span>
                  <!-- <img class="icon" src="" @click="item.inverse = !item.inverse"> -->
                </div>
              </div>
              <!-- <data-table v-show="item.dataTable" :data="item.data" :data-type="item.dataType" :is-big="false" /> -->
              <div v-show="!item.dataTable" class="chart">
                <!-- linecharts -->
                <line-charts
                  v-if="item.data.length"
                  :index="index"
                  :data="item.data"
                  :inverse="item.inverse"
                  :data-type="item.dataType"
                  :is-big="false"
                  :main-width="mainWidth"
                  :main-height="mainHeight"
                />
                <div v-if="!item.data.length" class="no-data">
                  您查询的此时间段暂无数据！！
                </div>
              </div>
            </div>
          </el-col>
        </div>
      </el-row>
    </div>
    <div v-else class="container">
      <h5>此地灾下暂无测量组!</h5>
    </div>
    <!--显示大图-->
    <el-dialog
      v-if="bigShow"
      :visible.sync="bigShow"
      :title="'大图展示 (' + measureList[nowIndex].name + ')'"
      width="1480px"
      top="2vh"
    >
      <el-form class="dashboard-big" :inline="true" label-position="left">
        <el-form-item label="查询时间">
          <el-date-picker
            v-model="bigObject.timeSel"
            value-format="timestamp"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @blur="submitTime(bigObject.timeSel, nowIndex)"
          />
        </el-form-item>
        <el-form-item>
          <el-switch
            v-model="bigObject.switchButton"
            active-color="#008EE8"
            inactive-color="#064f77"
            active-text="定时刷新"
          />
          <el-switch
            v-model="bigObject.dataType"
            style="margin-left: 30px"
            active-color="#008EE8"
            inactive-color="#064f77"
            active-text="偏移量"
            inactive-text="距离量"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            @click="bigDataTable = !bigDataTable"
          >图表转换</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            @click="bigObject.inverse = !bigObject.inverse"
          >翻转</el-button>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="primary" size="small" @click="downloadExcel(measureList[nowIndex].id)">下载</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" size="small" @click="clearData(measureList[nowIndex].id, bigObject.timeSel, nowIndex)">清空数据</el-button>
        </el-form-item> -->
      </el-form>
      <data-table
        v-if="bigDataTable"
        :data="bigObject.data"
        :data-type="bigObject.dataType"
        :is-big="true"
      />
      <div v-if="!bigDataTable" class="chart">
        <line-charts
          v-if="bigObject.data.length"
          :index="nowIndex"
          :data="bigObject.data"
          :inverse="bigObject.inverse"
          :data-type="bigObject.dataType"
          :is-big="true"
        />
        <div
          v-if="!bigObject.data.length"
          class="no-data"
          style="margin-bottom: 80px"
        >
          您查询的此时间段暂无数据！！
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getMeasureList,
  searchLine,
  clearMeasureData,
  toggleData
} from '@/api/dashboard'
import { getLaser } from '@/api/data'
import { getSceneAll } from '@/api/scene'
import { parseTime } from '@/utils/index'
import LineCharts from '@/components/LineChart'
import DataTable from '@/components/DataTable'
// import DataTable from './components/DataTable'
export default {
  name: 'Dashboard',
  components: {
    LineCharts: LineCharts,
    DataTable
  },
  data() {
    return {
      searchData: {
        scene: ''
      },
      sceneSelShow: false, // 地灾选择下拉框的显示与否
      sceneSel: '', // 默认宁波
      sceneList: [],
      checkHas: false, // 渲染完成显示折线图
      measureList: [
        { name: '洞窟3-1' },
        { name: '洞窟3-2' },
        { name: '洞窟2-1' },
        { name: '洞窟2-2' },
        { name: '洞窟1-1' },
        { name: '洞窟1-2' }
      ],
      allData: [],
      bigShow: false, // 显示大图
      bigObject: {},
      nowIndex: 0,
      bigDataTable: false,
      bindId: null,
      mainWidth: null, // 监听mainEcharts适配
      mainHeight: null,
      IntvalWatch: null
    }
  },
  mounted() {
    this.getSceneList()
    this.IntvalWatch = setInterval(() => {
      if (this.$refs.echarts_mains1) {
        this.mainWidth = this.$refs.echarts_mains1[0].clientWidth
        this.mainHeight = this.$refs.echarts_mains1[0].clientHeight
      }
      // mian宽
    }, 500)
  },
  beforeDestroy() {
    clearInterval(this.IntvalWatch)
  },
  methods: {
    /* 获取地灾数组*/
    getSceneList() {
      this.sceneChange()
      // getSceneAll().then(res => {
      //   const id = Number(this.$route.params.id)
      //   if (res.data.length) {
      //     this.sceneList = res.data
      //     this.searchData.scene = id
      //     let name = res.data.filter(item => item.id === id)
      //     this.sceneChange(id, name[0].name)
      //   } else {
      //     this.sceneList = []
      //   }
      // })
    },
    // 下载excel
    downloadExcel(id) {
      const start = parseTime(
        Date.now() - 90 * 24 * 60 * 60 * 1000,
        '{y}-{m}-{d} {h}:{i}:{s}'
      )
      const end = parseTime(Date.now(), '{y}-{m}-{d} {h}:{i}:{s}')
      window.open(
        `${process.env.VUE_APP_BASE_API}/debug/data?start=${this.bigObject.timeSel[0]}&end=${this.bigObject.timeSel[1]}&groupId=${id}`,
        '_blank'
      )
    },
    // 切换地灾
    sceneChange() {
      // 去掉定时器的方法
      window.clearInterval(this.time)
      this.checkHas = true
      this.initChartStart()
      // getMeasureList({
      //   scene
      // }).then(res => {
      //   this.measureList = res.data
      //   if (res.data.length) {
      //     this.checkHas = true
      //     this.initChartStart()
      //   } else {
      //     this.checkHas = false
      //     this.$message(res.msg)
      //   }
      // })
      this.sceneSel = 'name'
      this.sceneSelShow = false
    },
    aa(i, start, end, res, it) {
      this.allData[i].timeSel = [start, end]
      this.allData[i].data = res.data
      this.allData[i].inverse = false
      this.allData[i].dataTable = false
      this.allData[i].switchButton = false
      this.allData[i].dataType = false
      this.allData[i].name = it.name
    },
    /* 循环渲染折线图 */
    async initChartStart() {
      this.allData = []
      const end = Date.now()
      const start = Date.now() - 90 * 24 * 60 * 60 * 100
      this.measureList.map((it, i) => {
        this.allData.push({ name: '', data: [], inverse: false, dataTable: false, switchButton: false, dataType: false })
        getLaser({
          type: i + 1,
          startTime: start,
          endTime: end
        }).then((res) => {
          if (res.status === 200) {
            this.aa(i, start, end, res, it)
          }
        })
      })
      this.initTime()
      // const promises = this.measureList.map(item => getLaser({
      //   group: item.id,
      //   start,
      //   end
      // }))
      // for (const promise of promises) {
      //   const column = await promise
      //   this.allData.push({
      //     timeSel: [start, end],
      //     data: column.data,
      //     inverse: false,
      //     dataTable: false,
      //     switchButton: false,
      //     dataType: false
      //   })
      // }
      // this.initTime()
    },
    /* 定时器init*/
    initTime() {
      this.time = window.setInterval(this.refreshCount, 45000)
    },
    /* 刷新对应的*/
    refreshCount() {
      if (this.allData.length) {
        this.allData.forEach((item, index) => {
          if (item.switchButton) {
            const end = Date.now()
            const start = this.allData[index].timeSel[0]
            this.allData[index].timeSel = [start, end]
            getLaser({
              type: this.nowIndex + 1,
              startTime: start,
              endTime: end
            }).then((res) => {
              this.allData[index].data = res.data
            })
          }
        })
      }
    },
    /* 点击切换算法*/
    toggleCal(item, index) {
      const { receId, tranId } = item.data
      toggleData({
        receId,
        tranId
      }).then((res) => {
        this.$message({
          type: 'success',
          message: '切换算法中...请等待!'
        })
        const end = parseTime(Date.now(), '{y}-{m}-{d} {h}:{i}:{s}')
        const start = this.allData[index].timeSel[0]
        this.allData[index].timeSel = [start, end]
        searchLine({
          group: this.measureList[index].id,
          start,
          end
        }).then((res) => {
          this.allData[index].data = res.data
          this.$message({
            type: 'success',
            message: '切换算法成功!'
          })
        })
      })
    },
    /* 点击按钮查看大图*/
    clickBig(item, index) {
      this.bigShow = true
      this.bigObject = item
      this.nowIndex = index
    },
    /* 大图提交时间查询再渲染页面*/
    submitTime(list, i) {
      const index = i
      if (list.length) {
        getLaser({
          type: i + 1,
          startTime: list[0],
          endTime: list[1]
        }).then((res) => {
          this.allData[index].data = res.data
        })
      }
    },
    /* 清空对应测量组数据*/
    clearData(id, list, index) {
      this.$confirm('此操作将清空该测量组的所有数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          clearMeasureData({
            id
          }).then((res) => {
            this.$message({
              type: 'success',
              message: '清空成功!'
            })
            searchLine({
              group: id,
              start: list[0],
              end: list[1]
            }).then((res) => {
              this.allData[index].data = res.data
            })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消清空'
          })
        })
    },
    // 城市选择
    // 移入
    mouseOver() {
      this.sceneSelShow = true
    },
    // 移出
    mouseLeave() {
      this.sceneSelShow = false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.topMenu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.button {
  font-size: 16px;
  font-weight: 400;
  color: rgba(10, 210, 57, 1);
  cursor: pointer;
  margin-right: 60px;
}
.sceneList {
  display: flex;
  align-items: center;
  color: #7a8494;
  letter-spacing: 1px;
  font-size: 16px;
  z-index: 12;
  margin-left: 35px;
  letter-spacing: 2px;

  .city-select {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 200px;
    padding: 10px 0;
    z-index: 15;
    cursor: pointer;

    img {
      width: 10px;
      height: 10px;
      margin-left: 6px;
      transition: all 0.1s;
    }

    ul {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      margin: 0;
      padding-top: 30px;
      padding-bottom: 8px;
      box-sizing: border-box;
      border-radius: 20px;
      background: #1e2635;
      list-style: none;
      z-index: -1;
      margin-block-start: 0;
      margin-block-end: 0;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 0;

      li {
        width: 100%;
        padding: 5px 25px;
        font-size: 14px;
        color: #7a8494;
        text-align: left;

        &:hover {
          background: #141b26;
        }
      }
    }
  }
}

.container {
  width: 98%;
  margin: 50px auto;

  h5 {
    font-size: 25px;
    color: #7a8494;
    text-align: center;
    letter-spacing: 5px;
  }

  .el-row {
    margin-left: 4%;
  }
}

.line-card {
  width: 100%;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0px 32px 39px 12px rgba(19, 26, 37, 0.07);
  border-radius: 20px;
  border: 1px solid #ccc;
  font-size: 14px;
  color: #a9b8e2;
  padding: 30px;
  box-sizing: border-box;
  margin-bottom: 50px;

  .top-title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10;

    .title {
      display: flex;
      align-items: center;

      p {
        margin-left: 20px;
      }

      img {
        width: 26px;
        height: 26px;
        margin-right: 20px;
      }

      .icon {
        width: 20px;
        height: 20px;
        cursor: pointer;
      }

      h1 {
        font-size: 18px;
        font-weight: 800;
        color: rgba(169, 184, 226, 1);
        line-height: 23px;
        letter-spacing: 1px;
      }
    }

    img {
      width: 24px;
      height: 24px;
      cursor: pointer;
    }
  }
}

.no-data {
  font-size: 22px;
  text-align: center;
  margin-top: 150px;
  letter-spacing: 3px;
}
</style>
